<template>
  <div class="content-main">
    <div class="short-video">
      <div class="videos">
        <vue-core-video-player
          :src="recommendList[currentWorksIndex].videoPath"
          :cover="recommendList[currentWorksIndex].coverPath"
          :title="recommendList[currentWorksIndex].authorName"
          autoplay
          :loop="true"
          controls="fixed"
        />
        <!-- <vue-core-video-player
          src="https://yaling.oss-cn-shenzhen.aliyuncs.com/yinxiu/views.mp4"
        ></vue-core-video-player> -->
      </div>
      <div class="open-comment">
        <el-button
          type="text"
          icon="el-icon-arrow-left"
          class="btn-left"
          @click="turnComment()"
        ></el-button>
      </div>
      <div
        class="comment-drawer"
        style="position: relative"
        v-show="commentary"
      >
        <!-- <el-drawer
          :size="size"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
          :append-to-body="true"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
          class="drawer-content"
        >
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="TA的作品" name="first">用户管理</el-tab-pane>
              <el-tab-pane label="评论" name="second">配置管理</el-tab-pane>
            </el-tabs>
          </div> -->
        <!-- <videoCommentary></videoCommentary> -->
        <!-- </el-drawer> -->
        <el-drawer
          title="我是标题"
          :size="size"
          class="drawer-content"
          :visible.sync="drawer"
          :with-header="false"
          :append-to-body="true"
          :before-close="handleClose"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <div>
            <el-tabs
              class="drawer-tabs"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="TA的作品" name="first">
                <Production
                  :dataList="allWorksList"
                  :friendId="recommendList[this.currentWorksIndex].userId"
                  :userSimpleInfo="userSimpleInfo"
                ></Production>
              </el-tab-pane>
              <el-tab-pane label="评论" name="second">
                <videoCommentary
                  :worksId="recommendList[this.currentWorksIndex].worksId"
                  :commentCount="
                    recommendList[this.currentWorksIndex].commentCounts
                  "
                ></videoCommentary
              ></el-tab-pane>
            </el-tabs>
          </div>
        </el-drawer>
      </div>
    </div>
    <div
      class="advertisement"
      @click="openAdvertise()"
      v-show="recommendList[currentWorksIndex].productName != null"
    >
      <div class="iconfont icon-shopcar gooda-car"></div>
      <div>
        <p>购物 | {{ recommendList[currentWorksIndex].productName }}</p>
        <p style="color: #787878">
          库存{{
            recommendList[currentWorksIndex].productStock | filterDotNumber
          }}
          | 已售{{
            recommendList[currentWorksIndex].productSales | filterDotNumber
          }}
        </p>
      </div>
    </div>
    <div class="description">
      <div>
        @{{ recommendList[currentWorksIndex].authorName
        }}<span style="margin: 0 6px">•</span
        ><span style="font-size: 12px">{{
          recommendList[currentWorksIndex].updateTime | formatDate
        }}</span>
      </div>
      <el-tooltip
        class="tooltip-item"
        effect="dark"
        :content="recommendList[currentWorksIndex].worksDesc"
        placement="top-start"
        ><div class="description-words">
          {{ recommendList[currentWorksIndex].worksDesc }}
          <span style="color: #face15"
            ><template
              v-for="topic in recommendList[currentWorksIndex].topicList"
            >
              #{{ topic.topicTitle }}</template
            ></span
          >
        </div>
      </el-tooltip>
    </div>
    <div class="behavior">
      <div class="woekAvatar">
        <div style="position: relative">
          <img :src="recommendList[currentWorksIndex].userAvatar" />
          <div class="icon-size" @click="iconbtn()">
            <img
              src="../assets/images/addConcern.png"
              v-if="(this.userSimpleInfo.follow = false)"
            />
            <img src="../assets/images/concerned.png" v-else />
          </div>
        </div>
      </div>
      <div @click="handlelikeWorkFun()">
        <i
          :class="['iconfont icon-dianzan', this.likeStatus ? 'work-like' : '']"
        ></i>
        <p>{{ recommendList[currentWorksIndex].likeCounts }}</p>
      </div>
      <div @click="handleCommentFun()">
        <i class="iconfont" style="font-size: 22px !important">&#xe63a;</i>
        <p>{{ recommendList[currentWorksIndex].commentCounts }}</p>
      </div>
      <div @click="handleCollectWorkFun()">
        <i
          :class="['iconfont', this.collectStatus ? 'work-collect' : '']"
          style="font-size: 24px !important"
          >&#xe8c6;</i
        >
        <p>{{ recommendList[currentWorksIndex].collectCounts }}</p>
      </div>
    </div>

    <div class="advertise-drawer" style="position: relative" v-show="advertise">
      <el-drawer
        title="我是标题"
        :size="size"
        class="drawer-content special-content"
        :visible.sync="advertisedrawer"
        :with-header="false"
        :append-to-body="true"
        :before-close="handleClose"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <Advertise></Advertise>
      </el-drawer>
    </div>

    <div class="command-button">
      <div>
        <div>
          <el-button
            type="text"
            icon="el-icon-arrow-up"
            class="btn-up"
            @click="prevWorks()"
          ></el-button>
        </div>
        <div>
          <el-button
            type="text"
            icon="el-icon-arrow-down"
            class="btn-down"
            @click="nextWorks()"
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  handleUnlikeWorkApi,
  handlelikeWorkApi,
  cancelCollectWorkApi,
  handleCollectWorkApi,
} from "@/api/recommend";
import loading from "./loading";
import { formatDate } from "@/utils/date";
import { getUserSimpleInfoApi } from "@/api/production";
import { getAllWorksListApi } from "@/api/user";
import Production from "@/components/Production.vue";
import Advertise from "@/components/Advertise.vue";
import videoCommentary from "@/components/videoCommentary.vue";
import AdvertiseVue from "@/components/Advertise.vue";
export default {
  name: "videoPaly",
  data() {
    return {
      currentWorksIndex: 9,
      currentPage: 1,
      activeName: "first",
      commentary: false,
      advertise: false,
      statement: false,
      drawer: false,
      advertisedrawer: false,
      statementdrawer: false,
      direction: "rtl",
      direction2: "btt",
      loading: false,
      size: "377px",
      allWorksList: [],
      userSimpleInfo: {},
      likeStatus: false,
      collectStatus: false,
      page: 1,
      userInfo: this.$store.state.userInfo,
    };
  },
  props: ["recommendList"],
  components: {
    videoCommentary,
    Production,
    Advertise,
    loading,
  },

  filters: {
    formatDate(time) {
      // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "MM月dd日");
      }
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterDotNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(1);
        return realVal + "w";
      } else {
        return arg;
      }
    },
  },
  methods: {
    handlelikeWorkFun() {
      if (this.likeStatus == false) {
        handlelikeWorkApi({
          worksId: this.worksId,
          userId: this.userInfo.userId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.recommendList[this.currentWorksIndex].likeCounts++;
            this.likeStatus = true;
          }
        });
      } else {
        handleUnlikeWorkApi({
          worksId: this.worksId,
          userId: this.userInfo.userId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.recommendList[this.currentWorksIndex].likeCounts--;
            this.likeStatus = false;
          }
        });
      }
    },
    handleCollectWorkFun() {
      if (this.collectStatus == false) {
        handlelikeWorkApi({
          worksId: this.worksId,
          userId: this.userInfo.userId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.recommendList[this.currentWorksIndex].collectCounts++;
            this.collectStatus = true;
          }
        });
      } else {
        handleUnlikeWorkApi({
          worksId: this.worksId,
          userId: this.userInfo.userId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.recommendList[this.currentWorksIndex].collectCounts--;
            this.collectStatus = false;
          }
        });
      }
    },
    handleCommentFun() {
      this.drawer = !this.drawer;
      this.commentary = !this.commentary;
      this.getAllWorksListFun();
      this.activeName = "second";
      this.getUserSimpleInfoFun();
    },
    getUserSimpleInfoFun() {
      getUserSimpleInfoApi({
        userId: this.userInfo.userId,
        friendId: this.recommendList[this.currentWorksIndex].userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.userSimpleInfo = res.data.data;
        }
      });
    },
    getAllWorksListFun() {
      getAllWorksListApi({
        userId: this.recommendList[this.currentWorksIndex].userId,
        page: this.page,
        keyword: null,
      }).then((res) => {
        if (res.data.code == 200) {
          this.allWorksList = res.data.data;
        }
      });
    },
    prevWorks() {
      if (this.currentWorksIndex == 0) {
        if (this.currentPage == 1) {
          // 提示用户当前已经是最前
          this.$message({
            type: "info",
            message: "当前已经是最前",
          });
        } else {
          this.currentPage--;
          this.getRecommendListFun();
        }
      } else {
        this.currentWorksIndex--;
      }
    },
    nextWorks() {
      if (this.currentWorksIndex == this.recommendList.length - 1) {
        this.currentPage++;
        this.currentWorksIndex = 0;
        this.getRecommendListFun();
      } else {
        this.currentWorksIndex++;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    turnComment() {
      this.drawer = !this.drawer;
      this.commentary = !this.commentary;
      this.getAllWorksListFun();
      this.getUserSimpleInfoFun();
      //  this.commentary = false;
    },
    openAdvertise() {
      this.advertisedrawer = !this.advertisedrawer;
      this.advertise = !this.advertise;
    },

    handleClose(done) {
      this.activeName = "first";
      this.commentary = false;
      this.drawer = false;
      this.advertise = false;
      this.advertisedrawer = false;
      this.statement = false;
      this.statementdrawer = false;
    },
    handleExit(done) {
      //  this.statement = false;
      // this.statementdrawer = false;
    },
    iconbtn() {
      this.userSimpleInfo.follow = !this.userSimpleInfo.follow;
    },
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.gooda-car {
  width: 15px;
  background: #fb8427;
  margin-right: 5px;
  color: #fff;
  padding: 2px;
  height: 15px;
  border-radius: 3px;
  font-size: 14px;
}
.advertisement {
  cursor: pointer;
  position: absolute;
  display: flex;
  left: 45px;
  padding: 3px;
  bottom: 115px;
  background: #343540;
  border-radius: 5px;
  font-size: 12px;
  color: #b1afaf;
}
.behavior {
  cursor: pointer;
  position: absolute;
  right: 85px;
  color: #c3c3c3;
  bottom: 95px;
  font-size: 16px;
}
.description {
  position: absolute;
  bottom: 30px;
  left: 215px;
  color: #e9e9e9;
}
.behavior > div {
  margin: 20px 0;
  text-align: center;
}
.behavior > div > i {
  display: block;
  text-align: center;
  margin-bottom: 4px;
}
.work-like,
.work-collect {
  color: #ff0000;
}

.content-main {
  background: #161823;
  width: 100%;
  height: 100%;
  /* height: 625px; */
  display: flex;
}
.short-video {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  /* background: #fff; */
}
.videos {
  flex: 1;
  height: 94%;
  z-index: 0;
  margin-left: 24px;
  /* border: 1px solid red; */
}
.videos .vcp-container video {
  height: 90%;
}
/* .videos .vcp-dashboard {
bottom: -35px;
} */
.command-button {
  align-items: center;
  display: flex;
  text-align: center;
  justify-content: center;
  /* position: fixed; */
  width: 50px;
  top: 50%;
  right: 10px;
}
.btn-up,
.btn-down {
  width: 40px;
  height: 40px;
  background: #343540;
  font-weight: bold;
}
.btn-up:hover,
.btn-down:hover {
  background: #343540;
}
.btn-up .el-icon-arrow-up:before,
.btn-down .el-icon-arrow-down:before {
  font-weight: bolder;
  color: rgb(138, 138, 138);
}
.btn-up:hover .el-icon-arrow-up:before,
.btn-down:hover .el-icon-arrow-down:before {
  font-weight: bolder;
  color: #fff;
}

.btn-up {
  border-radius: 20px 20px 0 0;
}
.btn-down {
  border-radius: 0 0 20px 20px;
}
.open-comment {
  position: absolute;
  background: #34363a;
  width: 30px;
  height: 40px;
  text-align: center;
  border: 1px solid #e7e7e7;
  right: 52px;
  border: 1px solid #6b6969;
  border-right: 1px solid #34363a;
  border-radius: 20px 0 0 20px;
  transition: ease 1s;
}
.btn-left .el-icon-arrow-left:before {
  font-weight: bold;
  color: rgb(138, 138, 138);
}
.open-comment:hover {
  transform: scale(1.2);
  color: #fff;
}
.comment-drawer {
  /* position: relative; */
  width: 380px;
  height: 537px;
  /* display: none; */
}
.advertise-drawer {
  width: 380px;
  margin: 20px 0;
}

/* .advertise-drawer .el-drawer__container .el-drawer__title .el-drawer__body{
  background:#f5f6f9 !important ;
} */
.comment-drawer .el-drawer.ltr {
  width: 24% !important;
}
.el-drawer__wrapper .el-drawer__container .el-drawer.ltr,
.el-drawer__wrapper .el-drawer__container .el-drawer.rtl {
  margin-top: 87px;
  /* background: #3a393e; */
  color: #fff;
  right: 53px;
  /* height: 547px; */
}
.el-drawer__wrapper .el-drawer__body {
  background: #f5f6f9;
}
.drawer-content .el-drawer__header {
  border-bottom: 1px solid #4a4a4a !important;
  /* padding: 20px 20px 0; */
  margin-bottom: 0px;
  padding: 15px !important;
}
.drawer-content .el-drawer__body > div {
  height: 100%;
}
.drawer-content .el-drawer__body {
  height: 100%;
  background: #3a393e;
}
.special-content .el-drawer__body {
  height: 100%;
  background: #f5f6f9;
}

.drawer-content .el-drawer__container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 85%;
  width: 100%;
}
.el-drawer__body::-webkit-scrollbar {
  display: none;
}
.drawer-content .el-tabs__item.is-active {
  color: #fff;
}
.drawer-content .el-tabs__item {
  font-weight: 600;
  color: #959595;
  box-sizing: border-box;
}
.drawer-content .el-tabs__nav-scroll {
  padding: 0px 10px;
}
.drawer-content .el-tabs__header {
  margin: 0;
  height: 40px;
  padding: 5px 0;
}
.drawer-content .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #464646;
}
.drawer-content .el-tabs {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.drawer-tabs .el-tabs__content {
  flex: 1;
  flex-direction: column;
}
.safe-statement {
  font-weight: 500;
  margin: 12px 0;
  font-size: 20px;
  text-align: center;
}
.statement-box {
  margin: 0 10px;
}
.el-drawer.btt,
.el-drawer.ttb {
  position: absolute;
  width: 377px;
  /* left: 0; */
  right: 53px;
  bottom: 0;
}
.statement-details {
  background: #efefef;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
}
.statement-lis {
  display: flex;
  margin: 10px 0;
}
.statement-pictures img {
  width: 30px;
  height: 30px;
}
.state-left {
  margin-left: 6px;
}
.state-left h3 {
  font-weight: 400;
  font-size: 16px;
}
.state-left p {
  color: #b4b4b4;
  font-size: 12px;
  margin-top: 2px;
}
.description-words {
  font-size: 14px;
  margin-top: 5px;
  width: 510px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
  word-break: break-all;
}
.woekAvatar > div > img {
  width: 55px;
  height: 55px;
  margin-bottom: 10px;
  border-radius: 50%;
}
.icon-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.icon-size > img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.tooltip-item{
  float: left;
}
</style>
